<template>
    <div>
      <el-input v-model="input" placeholder="搜索订单"></el-input>
   <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="车位编号"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>租车牌号: {{ scope.row.code }}</p>
          <p>租客联系方式: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="收费金额"
      width="180">
      25.00
    </el-table-column>
     <el-table-column
      label="提成金额"
      width="180">
      5.00
    </el-table-column>
      <el-table-column
      label="状态"
      width="180">
      已完成
    </el-table-column>
  </el-table>


    </div>
</template>
<script>
export default {
    name:"compint",
    data() {
      return {
        input:"",
          tableData: [
         {
          date: '2016-05-02',
          code:"渝D8845",
          name: '谭**',
          address: '17726545484'
         }
        ]
      }
    },
     methods: {
          handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
}
</script>